import React, { Component } from 'react';
import { Form, Input, Row, Col, Button } from "antd";
import styles from './Verify.css';

const FormItem = Form.Item;
class Verify extends Component {
	constructor(props) {
		super(props);
		this.state = {}
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 16 },

		};
		return (
			<div className={styles.normal}>
				<p className={styles.title}>请验证卡片密码：</p>
				<Form onSubmit={this.handleSubmit} className={styles.from}>
					<div className="inputItem">
						<Row gutter={16}>
							<Col span={20}>
								<FormItem
									{...formItemLayout}
									label="卡片密码"
									hasFeedback
									style={{margin:'60px 0'}}
								>
									{getFieldDecorator('password', {
										rules: [
											{ required: true, message: '请输入卡片密码！' },
											{ pattern: /^[1-9][0-9]{5}$/, message: '请输入符合规则的密码！' }
										],
										validateFirst: true,
										// initialValue: '888888'
									})(
										<Input placeholder="请输入卡片密码" type='password' />
									)}
								</FormItem>
							</Col>
						</Row>
					</div>
					<div className={styles.btn}>
						<Button className={styles.btnItem}>提交</Button>
						<Button className={styles.btnItem}>忘记密码</Button>
						<Button className={styles.btnItem}>返回</Button>
					</div>
				</Form>
			</div>
		)
	}
}
Verify = Form.create({})(Verify);

export default Verify;
